<!--
* @Author: white_queen
* @Date: 2024-07-16 15:00:05
* @LastEditors: white_queen
* @LastEditTime: 2024-07-21 13:53:21
* @FilePath: /pages/my/index/index.vue
* @Description: 我的模块
-->
<template>
	<view class="page">
		<u-navbar bgColor="rgba(255,255,255,0)">
			<!-- uview的bug tabbar页面不会自动隐藏左侧区域 -->
			<view class="u-nav-slot" slot="left"></view>
			<!-- uview没有接口可以修改title的颜色 -->
			<view class="u-nav-slot" slot="center">
				<text style="color: #fff">个人中心</text>
			</view>
		</u-navbar>
		<!-- 顶部背景 -->
		<image class="bg" :src="list.bg" mode="widthFix"></image>
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="top">
				<image class="avatar" :src="list.avatar" mode="widthFix"></image>
				<view class="name-view">
					<view class="name">
						{{ list.name }}
					</view>
					<view class="rank">
						{{ rank }}
					</view>
				</view>
				<image @click="createQrCode" class="right-icon" src="../../../static/icon/code.png" mode="widthFix"></image>
			</view>
			<view class="bottom">
				<view class="item">
					<view class="item-top">{{ list.money }}</view>
					<view class="item-bottom">账户余额</view>
				</view>
				<view class="item">
					<view class="item-top">{{ list.power }}</view>
					<view class="item-bottom">能量值</view>
				</view>
				<view class="item">
					<view class="item-top">999.00</view>
					<view class="item-bottom">今日收益</view>
				</view>
			</view>
		</view>
		<!-- vip等级卡 -->
		<view class="vip-card" v-if="identity == 1 || identity == 2">
			<image class="bg" :src="list.level.bg_img" mode="widthFix"></image>
			<text class="level-title" :style="{ backgroundColor: textBgColor(0) }">当前等级</text>
			<image class="level-icon" :src="list.level.icon" mode="widthFix"></image>
			<text class="level-text" :style="{ color: textBgColor(1) }">{{ list.level.name }}</text>
			<view @click="clickProgress" class="progress-text" :style="{ color: textBgColor(1) }">{{ list.exp }}/{{ list.level.up_power || 0 }} 经验值 ></view>
			<view class="progress-bar">
				<view class="progress-bar-left" :style="{ width: progressBarStyle.width, backgroundImage: progressBarStyle.backgroundImage }"></view>
			</view>
		</view>
		<!-- 数据中心 -->
		<!-- <view class="DC"></view> -->
		<view class="main" :style="{ top: mainStyle.top }">
			<image class="main-img" src="../../../static/icon/my/个人中心.png" mode="widthFix"></image>
			<view class="main-view">
				<view class="main-top">
					<view class="main-top-item" @click="toOrder(1)">
						<image class="main-top-item-icon" src="../../../static/icon/my/付款 2.png" mode="widthFix"></image>
						<view class="main-top-item-text">待付款</view>
					</view>
					<view class="main-top-item" @click="toOrder(2)">
						<image class="main-top-item-icon" src="../../../static/icon/my/已发货.png" mode="widthFix"></image>
						<view class="main-top-item-text">待发货</view>
					</view>
					<view class="main-top-item" @click="toOrder(3)">
						<image class="main-top-item-icon" src="../../../static/icon/my/3.1待收货.png" mode="widthFix"></image>
						<view class="main-top-item-text">待收货</view>
					</view>
					<view class="main-top-item" @click="toOrder(0)">
						<image class="main-top-item-icon" src="../../../static/icon/my/118订单、订单查询 2.png" mode="widthFix"></image>
						<view class="main-top-item-text">全部订单</view>
					</view>
				</view>
				<view class="main-bottom">
					<view class="main-bottom-item" @click="toCollect">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/收藏.png" mode="widthFix"></image>
							<text class="text">商品收藏</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>

					<view class="main-bottom-item" @click="toScore">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/矩形.png" mode="widthFix"></image>
							<text class="text">能量商城</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>

					<view class="main-bottom-item">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/分销.png" mode="widthFix"></image>
							<text class="text">分销中心</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>

					<view class="main-bottom-item" @click="toHistoryPage">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/浏览.png" mode="widthFix"></image>
							<text class="text">浏览足迹</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>

					<view class="main-bottom-item" @click="toSignInPage">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/签到.png" mode="widthFix"></image>
							<text class="text">每日签到</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>

					<view class="main-bottom-item">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/忠诚度权益.png" mode="widthFix"></image>
							<text class="text">会员权益</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>

					<view class="main-bottom-item">
						<view class="main-bottom-item-left">
							<image class="main-bottom-item-icon" src="../../../static/icon/my/3.1 设置备份.png" mode="widthFix"></image>
							<text class="text">系统设置</text>
						</view>
						<image class="main-bottom-item-right" src="../../../static/icon/right.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 为了满足ui!谁家好人能想出来这么嘎咕的玩意??? -->
		<!-- <view class="main" :style="{ top: mainStyle.top }">
			<image src="../../../static/icon/my/个人中心.png" mode="widthFix"></image>

			
			
		</view> -->
	</view>
</template>

<script>
import httpApi from '../../../http';
export default {
	onLoad() {
		this.init();
		this.identity = uni.getStorageSync('identity');
	},
	data() {
		return {
			list: {},
			userType: ['粉丝用户', '会员用户', '代理商', '创始人'],
			identity: null
		};
	},
	computed: {
		rank() {
			let index = uni.getStorageSync('identity');
			return this.userType[index - 1];
		},
		// 计算进度条样式
		progressBarStyle() {
			try {
				// 确保分母不为0
				const upPower = this.list.level.up_power || 1;
				const widthNum = Math.max(0, Math.min(600, (this.list.exp / upPower) * 600));
				const color = this.list.level.rate_color || '#000000'; // 默认颜色
				const gradient = `linear-gradient(to right, ${color})`;
				return {
					width: widthNum + 'rpx',
					backgroundImage: gradient
				};
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 计算代理商 粉丝 样式
		mainStyle() {
			// 用户身份
			let type = uni.getStorageSync('identity');
			let top; // 定位往上的高度
			let color; //背景色
			// 当前身份是粉丝或者会员
			if (type <= 2) {
				top = '-60rpx';
				color = 'rgba(255, 255, 255, 0)';
			} else {
				top = '0rpx';
				color = 'rgba(255, 255, 255, 1)';
			}
			return { top, color };
		}
	},
	methods: {
		init() {
			httpApi.MyApi.init({}).then((res) => {
				this.list = res.data;
			});
		},
		// 生成二维码
		createQrCode() {
			uni.showToast({
				title: '点击了个人二维码'
			});
			// https://static.kancloud.cn/sfzl/uniapp/3065883
		},
		clickProgress() {
			uni.showToast({
				title: '点击了进度条的文字'
			});
		},
		textBgColor(type) {
			try {
				let color = this.list.level.rate_color.split(',');
				if (type == 0) {
					return color[0] || '#fff';
				} else {
					return color[color.length - 1] || '#fff';
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		// 点击订单
		toOrder(type) {
			uni.navigateTo({
				url: '/pages/order/index/index?type=' + type
			});
		},
		// 点击积分商城
		toScore() {
			uni.navigateTo({
				url: '/pages/scoreShop/index/index'
			});
		},
		// 点击签到
		toSignInPage() {
			uni.navigateTo({
				url: '/pages/my/signIn/signIn'
			});
		},
		// 点击收藏
		toCollect() {
			uni.navigateTo({
				url: '/pages/my/collect/collect'
			});
		},
		// 浏览足迹
		toHistoryPage() {
			uni.navigateTo({
				url: '/pages/my/history/history'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	// background-color: #fff;
}
.bg {
	width: 750rpx;
}
.user-info {
	width: 750rpx;
	// height: 265rpx;
	padding-bottom: 36rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	.top {
		width: 100%;
		padding: 0 40rpx;
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.avatar {
			width: 160rpx;
			position: absolute;
			top: -52rpx;
			border: 4rpx solid #fff;
			border-radius: 50%;
			background-color: #fff;
		}
		.name-view {
			margin-left: 200rpx;
			margin-top: 30rpx;
			.name {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				line-height: 36rpx;
				text-transform: uppercase;
			}
			.rank {
				font-family: SourceHanSerifCN, SourceHanSerifCN;
				font-weight: 500;
				font-size: 24rpx;
				color: #bc9458;
				line-height: 34rpx;
				margin-top: 14rpx;
			}
		}
		.right-icon {
			margin-top: 30rpx;
			width: 48rpx;
		}
	}
	.bottom {
		width: 512rpx;
		margin: 40rpx auto 0;
		display: flex;
		justify-content: space-between;
		.item {
			display: flex;
			flex-direction: column;
			align-items: center;
			.item-top {
				font-size: 36rpx;
				font-weight: bold;
			}
			.item-bottom {
				font-size: 24rpx;
				color: #858585;
				margin-top: 10rpx;
			}
		}
	}
}
.vip-card {
	width: 750rpx;
	position: relative;
	height: 328rpx;
	background-color: #fff;
	.bg {
		width: 694rpx;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translate(-50%);
	}
	.level-title {
		width: 140rpx;
		height: 50rpx;
		color: #fff;
		text-align: center;
		position: absolute;
		top: 10rpx;
		left: 30rpx;
		border-radius: 40rpx 0 40rpx 0;
		font-size: 24rpx;
		line-height: 50rpx;
	}
	.level-icon {
		width: 48rpx;
		position: absolute;
		top: 80rpx;
		left: 80rpx;
	}
	.level-text {
		position: absolute;
		top: 76rpx;
		left: 140rpx;
		font-size: 44rpx;
	}
	.progress-text {
		position: absolute;
		top: 160rpx;
		left: 80rpx;
		font-size: 24rpx;
	}
	.progress-bar {
		width: 600rpx;
		height: 10rpx;
		border-radius: 10rpx;
		background-color: skyblue;
		position: absolute;
		left: 80rpx;
		top: 210rpx;
		background: rgba(255, 255, 255, 0.8);
		.progress-bar-left {
			height: 10rpx;
			border-radius: 10rpx;
		}
	}
}
.main {
	position: relative;
	z-index: 10;
	// padding-top: 42rpx;
	.main-view {
		width: 750rpx;
		background-color: $uni-page-bg;
		padding-bottom: 20rpx;
		.main-top {
			width: 690rpx;
			height: 180rpx;
			margin: 0 auto;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.main-top-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				.main-top-item-icon {
					width: 48rpx;
				}
				.main-top-item-text {
					margin-top: 24rpx;
					font-family: SourceHanSerifCN, SourceHanSerifCN;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					line-height: 28rpx;
				}
			}
		}

		.main-bottom {
			width: 690rpx;
			margin: 20rpx auto 0;
			border-radius: 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;
			.main-bottom-item {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 44rpx 0;
				border-bottom: 1rpx solid #f0f0f0;
				.main-bottom-item-left {
					display: flex;
					align-items: center;
					.main-bottom-item-icon {
						width: 48rpx;
					}
					.text {
						font-family: SourceHanSerifCN, SourceHanSerifCN;
						font-weight: 400;
						font-size: 28rpx;
						color: #282828;
						line-height: 28rpx;
						margin-left: 20rpx;
					}
				}
				.main-bottom-item-right {
					width: 48rpx;
				}
			}
		}
	}
}

.DC {
	width: 690rpx;
	height: 234rpx;
	margin: 46rpx auto 0;
}
</style>
